﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML 5 data- Attributes</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>HTML 5 data- Attributes</h1>
</header>

<div>
<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <a href="###">Hello, how are you?</a>
</li>
</div>
<div>
<p>
HTML5引入了一新的特性：自定义属性。<br />
在HTML5中定义一个自定义属性非常简单：你只要使用以’data-’开头，后面加上任意字符即可定义一个自定义属性.<br />
.dataset属性等同于.attributes属性（.attributes不常用，它不是一个真实的DOM属性，有些浏览器都不支持它）<br />
element.dataset[name] 等同于 element.getAttribut('data-'+name);<br />
jQuery1.4.3版本开始支持，使用jQuery的.data()方法来访问这些"data-*" 属性。var myid= jQuery("#awesome").data('myid');
</p>
</div>

</body>
</html>
<script type="text/javascript">
    var user = document.getElementsByTagName("li")[0];
    var pos = 0, span = user.getElementsByTagName("a")[0];
    var phrases = [
  { name: "city", prefix: "I am from " },
  { name: "food", prefix: "I like to eat " },
  { name: "lang", prefix: "I like to program in " }
];

    user.addEventListener("click", function () {
        var phrase = phrases[pos++];
        // Use the .dataset property
        span.innerHTML = phrase.prefix + user.dataset[phrase.name];
    }, false);
</script>